{% extends '_admin.html' %}
{% import 'public.html' as public %}



{% block modals %}
{{ super() }}
<div id="CarParkCash">
    <!--时租收费-->
    <div class="modal fade" id="HourlyPayModal" data-backdrop="static" tabindex="-1" aria-hidden="true" style="margin-top: 5%;">
        <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form id="HourlyPayForm">
                <div class="modal-header justify-content-center">
                    <h4 :class="[HourlyData.Money==0?'modal-title':'text-danger']" :style="HourlyData.Money>0?'font-size: 48px;font-weight: bolder;':false">
                        {[HourlyData.Money==0?'時租收費':'時租收費金額：'+String(HourlyData.Money)+' MOP']}
                    </h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div v-for="item in HourlyKeys" class="col-6">
                                <div v-for="key in item" class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-secondary">{[ ColumnName[key] ]}</span>
                                    </div>
                                    <input v-if="key=='LicensePlate'" v-model="HourlyData[key]" class="form-control" :name="key" style="text-transform: uppercase;">
                                    <select v-else-if="key=='PayMent'" v-model="HourlyData[key]" class="form-control" :name="key">
                                        {% for k, v in PayMents.items() %}
                                        <option value="{{ k }}">{{ v }}</option>
                                        {% endfor %}
                                    </select>
                                    <select v-else-if="key=='VehicleType'" v-model="HourlyData[key]" class="form-control" :name="key" disabled>
                                        {% for k, v in VehicleTypes.items() %}
                                        <option value="{{ k }}">{{ v }}</option>
                                        {% endfor %}
                                    </select>
                                    <input v-else v-model="HourlyData[key]" class="form-control" :name="key" 
                                    :type="['Money','ParkingTime'].includes(key)?'number':'text'" 
                                    :readonly="['TicketNumber'].includes(key)?false:'readonly'">
                                    <div v-if="key=='ParkingTime'" class="input-group-append">
                                        <span class="input-group-text">小時</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row text-center">
                            <img v-if="HourlyData.LicensePlateImg!=''" :src="HourlyData.LicensePlateImg" class="img-thumbnail">
                        </div>
                    </div>
                    <div class="modal-footer justify-content-center">
                    <button type="submit" class="btn btn-primary">收費</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <!--时租失票-->
    <div class="modal fade" id="HourlyTicketModal" data-backdrop="static" tabindex="-1" aria-hidden="true" style="margin-top: 5%;">
        <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form id="HourlyTicketForm">
                <div class="modal-header justify-content-center">
                    <h4>時租失票處理</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div v-for="item in TicketKeys" class="col-6">
                                <div v-for="key in item" class="input-group mb-3" style="font-size: large;">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-secondary">{[ ColumnName[key] ]}</span>
                                    </div>
                                    <select v-if="key=='VehicleType'" v-model="TicketData[key]" class="form-control" :name="key">
                                        {% for k, v in VehicleTypes.items() %}
                                        <option value="{{ k }}">{{ v }}</option>
                                        {% endfor %}
                                    </select>
                                    <input v-else-if="key=='EntranceTime'" v-model="TicketData[key]" class="form-control" :name="key" id="TicketEntranceTime">
                                    <input v-else v-model="TicketData[key]" class="form-control" :name="key" 
                                    :style="key=='LicensePlate'?'text-transform: uppercase;':false">
                                </div>
                            </div>
                        </div>
                        <div class="row text-center">
                            <img v-if="TicketData.LicensePlateImg!=''" :src="TicketData.LicensePlateImg" class="img-thumbnail">
                        </div>
                    </div>
                    <div class="modal-footer justify-content-center">
                    <button type="submit" class="btn btn-primary">补票</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <!--月租续费-->
    <div class="modal fade" id="MonthlyPayModal" data-backdrop="static" tabindex="-1" aria-hidden="true" style="margin-top: 5%;">
        <div class="modal-dialog">
        <div class="modal-content">
            <form id="MonthlyPayForm">
                <div class="modal-header justify-content-center">
                    <h3>月租收費</h3>
                    </div>
                    <div class="modal-body">
                        <div v-for="(val, key) in MonthlyData" v-if="key!='UserID'" class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text bg-secondary">{[ ColumnName[key] ]}</span>
                            </div>
                            <select v-if="key=='PayMent'" v-model="MonthlyData[key]" class="form-control" :name="key">
                                {% for k, v in PayMents.items() %}
                                <option value="{{ k }}">{{ v }}</option>
                                {% endfor %}
                            </select>
                            <select v-else-if="key=='VehicleType'" v-model="MonthlyData[key]" class="form-control" :name="key" disabled>
                                {% for k, v in VehicleTypes.items() %}
                                <option value="{{ k }}">{{ v }}</option>
                                {% endfor %}
                            </select>
                            <input v-else-if="key=='LicensePlate'" v-model="MonthlyData[key]" class="form-control" type="text"
                            :name="key" style="text-transform: uppercase;">
                            <input v-else v-model="MonthlyData[key]" class="form-control" :name="key" :type="key=='Money'?'number':'text'"
                            :readonly="['ValidTime','Price'].includes(key)?'readonly':false" :id="key=='Renewal'?'MonthlyRenewal':false">
                            
                            <div v-if="key=='Price'" class="input-group-append">
                                <span class="input-group-text">MOP/月</span>
                            </div>
                            <div v-else-if="key=='Money'" class="input-group-append">
                                <span class="input-group-text">MOP</span>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-center">
                    <button type="submit" class="btn btn-primary">收費</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
</div>
{% endblock %}


{% block scripts %}
{{ super() }}
<script>
    // 收费功能
    var CarParkCash = new Vue({
        el: '#CarParkCash',
        delimiters: ['{[', ']}'],
        data: {
            HourlyData:{
                ParkingID:'',
                LicensePlate:'',
                LicensePlateImg:'',
                TicketNumber:'',
                VehicleType:'',
                EntranceTime:'',
                ParkingTime:'',
                ParkingType:'',
                PayMent:'Cash',
                Money:0,
            },
            TicketData:{
                ParkingID:'',
                LicensePlate:'',
                LicensePlateImg:"",
                TicketNumber:'',
                VehicleType:'Car',
                EntranceTime:'',
            },
            MonthlyData:{
                UserID:'',
                LicensePlate:'',
                VehicleType:'',
                CardNumber:'',
                ValidTime:'',
                Renewal: '',
                PayMent:'Cash',
                Price:0,
                Money:0,
            },
            ColumnName:{Car:'私家車',Moto:'電單車',GateMessage:'閘機消息',VehicleType:'車輛類型',ParkingType:'車位類型',PayMent:'支付方式',ParkingTime:'停車時長',
                TicketNumber:'時租票號',CardNumber:'月租卡號',ValidTime:'原有效期',EntranceTime:'入場時間',LicensePlate:'車牌號碼',Money:'收費金額',Renewal:'新有效期',
                Price:'車位費用'
            },
            HourlyKeys:[['LicensePlate','TicketNumber','PayMent',],['EntranceTime','VehicleType','ParkingTime']],
            TicketKeys:[['LicensePlate','TicketNumber'],['EntranceTime','VehicleType']],
        },
        watch:{
            HourlyData:{
                handler(val, oldVal){
                    if(val.LicensePlate.length==6){this.get_hourly_parking_record(val.LicensePlate.toUpperCase())}
                    else{for(key in val){if(['LicensePlate','PayMent'].includes(key)==false&&val[key]!=''){val[key]=''}}}
                },
                deep:true
            },
            TicketData:{
                handler(val, oldVal){
                    if(val.LicensePlate.length==6){this.get_ticket_parking_record(val.LicensePlate.toUpperCase())}
                    else{for(key in val){if(['LicensePlate','PayMent'].includes(key)==false&&val[key]!=''){val[key]=''}}}
                },
                deep:true
            },
            MonthlyData:{
                handler(val, oldVal){
                    if(val.LicensePlate.length==6){this.get_monthly_member(val.LicensePlate.toUpperCase())}
                    else{for(key in val){if(['LicensePlate','PayMent'].includes(key)==false&&val[key]!=''){val[key]=''}}}
                },
                deep:true
            },
        },
        methods:{
            // 月租续费
            monthly_parking_pay(){
                axios.post("{{ url_for('charge.preview') }}", {Monthly:this.MonthlyData})
                .then(response => {if(response.status==200){
                    let ret = response.data
                    AppMessage.fire({icon: ret.icon, text: ret.text})
                    if(ret.icon=='success'){
                        if($('#MonthlyPayModal').css('display')=="block"){$("#MonthlyPayModal").modal('toggle')}
                    }
                    else{AppMessage.fire({icon: 'error', text: '請求錯誤，請聯係管理員'})}
                }})
                .catch(function (error) {alert(error)})
            },
            // 获取月租信息
            get_monthly_member(lp){
                if(lp!=this.MonthlyData.LicensePlate){
                    axios.post("{{ url_for('charge.preview') }}", {GetMonthly:{LicensePlate:lp}})
                    .then(response => {if(response.status==200){
                        let ret = response.data
                        if(ret.__proto__==Object.prototype){for(key in this.MonthlyData){if(ret.hasOwnProperty(key)){this.MonthlyData[key]=ret[key]}}}
                        else{AppMessage.fire({icon: 'error', text: '請求錯誤，請聯係管理員'})}
                    }})
                    .catch(function (error) {alert(error)})
                }
            },
            // 时租付费
            hourly_parking_pay(){
                axios.post("{{ url_for('charge.preview') }}", {Hourly:this.HourlyData})
                .then(response => {if(response.status==200){
                    let ret = response.data
                    AppMessage.fire({icon: ret.icon, text: ret.text})
                    if(ret.icon=='success'){
                        if($('#HourlyPayModal').css('display')=="block"){$("#HourlyPayModal").modal('toggle')}
                    }
                    else{AppMessage.fire({icon: 'error', text: '請求錯誤，請聯係管理員'})}
                }})
                .catch(function (error) {alert(error)})
            },
            // 获取在场信息
            get_hourly_parking_record(lp){
                if(lp!=this.HourlyData.LicensePlate){
                    axios.post("{{ url_for('charge.preview') }}", {GetData:{ParkingType:'Hourly',LicensePlate:lp}})
                    .then(response => {if(response.status==200){
                        let ret = response.data
                        if(ret.__proto__==Object.prototype){for(key in this.HourlyData){if(ret.hasOwnProperty(key)){this.HourlyData[key]=ret[key]}}}
                        else{AppMessage.fire({icon: 'error', text: '請求錯誤，請聯係管理員'})}
                    }})
                    .catch(function (error) {alert(error)})
                }
            },
            // 生成在场记录
            generate_parking_record(){
                axios.post("{{ url_for('charge.preview') }}", {GetTicket:this.TicketData})
                .then(response => {if(response.status==200){
                    let ret = response.data
                    AppMessage.fire({icon: ret.icon, text: ret.text})
                    if(ret.icon=='success'){
                        if($('#HourlyTicketModal').css('display')=="block"){$("#HourlyTicketModal").modal('toggle')}
                    }
                    else{AppMessage.fire({icon: 'error', text: '請求錯誤，請聯係管理員'})}
                }})
                .catch(function (error) {alert(error)})
            },
            // 获取失票记录
            get_ticket_parking_record(lp){
                if(lp!=this.TicketData.LicensePlate){
                    axios.post("{{ url_for('charge.preview') }}", {GetData:{ParkingType:'Hourly',LicensePlate:lp}})
                    .then(response => {if(response.status==200){
                        let ret = response.data
                        if(ret.__proto__==Object.prototype){for(key in this.TicketData){if(ret.hasOwnProperty(key)){this.TicketData[key]=ret[key]}}}
                        else{AppMessage.fire({icon: 'error', text: '請求錯誤，請聯係管理員'})}
                    }})
                    .catch(function (error) {alert(error)})
                }
            },
        },
        mounted: function(){
            // 清空时租
            $("#HourlyPayModal").on('show.bs.modal', function (event) {
                let button = $(event.relatedTarget) 
                CarParkCash.HourlyData.LicensePlate=''
            });
            // 清空失票
            $("#HourlyTicketModal").on('show.bs.modal', function (event) {
                let button = $(event.relatedTarget) 
                CarParkCash.TicketData.LicensePlate=''
            });
            // 清空月租
            $("#MonthlyPayModal").on('show.bs.modal', function (event) {
                let button = $(event.relatedTarget) 
                CarParkCash.MonthlyData.LicensePlate=''
            });
            // 时租收费
            $('#HourlyPayForm').validate({
                rules: {
                LicensePlate: {required: true,minlength:6},
                EntranceTime: {required: true},
                ParkingTime: {required: true},
                Money: {required: true,min:1},
                },
                errorElement: 'span',
                errorPlacement: function (error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.mb-3').append(error);
                },
                highlight: function (element, errorClass, validClass) {$(element).addClass('is-invalid')},
                unhighlight: function (element, errorClass, validClass) {$(element).removeClass('is-invalid')},
                // 提交
                submitHandler: function (){CarParkCash.hourly_parking_pay()},
            });
            // 失票处理
            $('#HourlyTicketForm').validate({
                rules: {
                    LicensePlate: {required: true},
                    VehicleType: {required: true},
                    EntranceTime: {required: true},
                },
                errorElement: 'span',
                errorPlacement: function (error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.mb-3').append(error);
                },
                highlight: function (element, errorClass, validClass) {$(element).addClass('is-invalid')},
                unhighlight: function (element, errorClass, validClass) {$(element).removeClass('is-invalid')},
                // 提交
                submitHandler: function (){CarParkCash.generate_parking_record()},
            });
            // 月租处理
            $('#MonthlyPayForm').validate({
                rules: {
                    LicensePlate: {required: true},
                    VehicleType: {required: true},
                    ValidTime: {required: true},
                    Renewal: {required: true},
                    Money: {required: true},
                },
                errorElement: 'span',
                errorPlacement: function (error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.mb-3').append(error);
                },
                highlight: function (element, errorClass, validClass) {$(element).addClass('is-invalid')},
                unhighlight: function (element, errorClass, validClass) {$(element).removeClass('is-invalid')},
                // 提交
                submitHandler: function (){CarParkCash.monthly_parking_pay()},
            });
            // 入场时间
            laydate.render({
                elem: "#TicketEntranceTime",
                type: 'datetime',
                done: value => {CarParkCash.TicketData.EntranceTime=value}
            });
            // 有效期范围
            laydate.render({
                elem: "#MonthlyRenewal",
                type: 'date',
                done: value => {CarParkCash.MonthlyData.Renewal=value}
            });
            
        }
    });
</script>
{% endblock %}


